<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./type.title";
import Card from "@/components/Card/index.vue";
import icon1 from "@/static/images/type-icon1.png";
import icon2 from "@/static/images/type-icon2.png";

const SCAN_STORE_OUT_ID = "OUTBOUND_ZJ_SCAN";
const SCAN_STORE_OUT_ID2 = "OUTBOUND_SCAN";


const handleJump = (type) => {
    const id = type === 1 ? SCAN_STORE_OUT_ID : SCAN_STORE_OUT_ID2
    uni.navigateTo({
        url: `/pages/scan/index?id=${id}&type=outbound&outType=${type}`,
    });
}
</script>

<template>
    <ViewContainer :title="titleConfig">
        <Card innerClass="success-card-container">
            <view class="title">请选择出库的类型</view>
            <view class="card" @click="() => handleJump(1)">
                <view class="left">
                    <view class="l-top">本地出货</view>
                    <view class="l-bottom">只在落地城市或者州区出货</view>
                </view>
                <view class="right">
                    <wd-img :src="icon1" class="icon" />
                </view>
            </view>
            <view class="card" @click="() => handleJump(2)">
                <view class="left">
                    <view class="l-top">外地转运</view>
                    <view class="l-bottom">需要转运到其他州的进行出货</view>
                </view>
                <view class="right">
                    <wd-img :src="icon2" class="icon" />
                </view>
            </view>
        </Card>
    </ViewContainer>
</template>

<style lang="less" scoped>
:deep(.success-card-container) {
    padding: 50px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    font-weight: 600;
    font-size: 45px;
    margin-top: 50px;
}

.card {
    width: 90%;
    border: 2px solid #000;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 70px 50px;

    margin-top: 100px;

    .left {
        .l-top {
            font-size: 40px;
            font-weight: 600;
            margin-bottom: 30px;
        }

        .l-bottom {
            font-size: 30px;
            color: rgba(0, 0, 0, 0.65);
        }
    }

    .right {
        width: 200px;
        height: 200px;

        .icon {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
